<template>
  <view class="swiper-video">
    <swiper @animationfinish="updateSwiperList" vertical circular :style="{'height':winHeight+'px'}"
      :current="swiperIndex" :interval="3000" class="swiper-content" :duration="1000">
      <swiper-item v-for="item,index in swiperList" :key="index">
        <view class="swiper-item">
          <!-- 视频 -->
          <video :loop="true" class="video-item" enable-auto-rotation @fullscreenchange="fullchange" :play-strategy="2"
            :custom-cache="false" :http-cache="true" :id="'video'+index" @timeupdate="updateSlider" @ended="gotoNext"
            enable-play-gesture :autoplay="index===swiperIndex" :style="{'height':videoH+'px','width':winWidth+'px'}"
            object-fit="contain" :controls="false" :show-center-play-btn="false" :src="item.videoUrl[0].url"></video>
          <view class="mutual">
            <view v-if="showInfo" class="top">  
              <view class="left">
                <!-- 视频创作信息 -->
                <view class="info">
                  <view class="user">
                    <image class="avatar" :src="item.creator.avatarUrl" mode="aspectFill"></image>
                    <view class="user-name">
                      {{item.creator.nickname}}
                    </view>
                    <view class="follow">+</view>
                  </view>
                  <view class="desc">
                    {{item.title}}
                  </view>
                  <view class="pubdate">
                    {{timeFormat(item.publishTime)}}
                  </view>
                </view>
              </view>
              <view class="right">
                <view @click="interactive(1,item)" class="r-item like">
                  <uni-icons size="32" :color="iconColor" type="hand-up-filled"></uni-icons>
                  <text>{{item.subscribeCount}}</text>
                </view>
                <view @click="interactive(2,item)" class="r-item comment">
                  <uni-icons size="32" color="#fff" type="chat-filled"></uni-icons>
                  <text>{{item.commentCount}}</text>
                </view>
                <view @click="interactive(3,item)" class="r-item relay">
                  <uni-icons size="32" color="#fff" type="redo-filled"></uni-icons>
                  <text>{{item.shareCount}}</text>
                </view>
                <view @click="interactive(4,item)" class="r-item collect">
                  <uni-icons size="32" color="#fff" type="folder-add-filled"></uni-icons>
                </view>
              </view>
            </view>
            <view class="footer">
              <slider @change="step" :value="start" :max="end" backgroundColor="#666" activeColor="#fff"
                class="slider-item" block-size="12" />
              <view class="content">
                <view class="ipt-wrap">
                  <input class="ipt" auto-blur :adjust-position="false" confirm-type="send">
                  <view @click="changeHandler()" class="isShowBarrage">
                    <uni-icons v-if="showBarrage" color="#ffffff" size="32" custom-prefix="iconfont"
                      type="icon-danmukaiqi"></uni-icons>
                    <uni-icons v-else color="#939393" size="32" custom-prefix="iconfont" type="icon-danmuguanbi">
                    </uni-icons>
                  </view>
                </view>
                <view @click="fullScreen" v-if="isFullScreen">
                  <uni-icons color="#ffffff" size="24" custom-prefix="iconfont" type="icon-quanping">
                  </uni-icons>
                </view>
                <view v-else @click="showInfo=!showInfo" class="isShow">
                  <uni-icons v-if="showInfo" color="#ffffff" size="18" custom-prefix="iconfont" type="icon-zhankai">
                  </uni-icons>
                  <uni-icons v-else color="#ffffff" size="17" custom-prefix="iconfont" type="icon-shouqi"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
  <pop-common :height="popHeight" @close="popClose" ref="pop"></pop-common>
</template>
<script setup>
  import {
    onLoad,
  } from "@dcloudio/uni-app"
  import {
    sourceLikes
  } from '@/request/api.js'
  import {
    timeFormat
  } from '@/utils/index.js'
  import {
    getCurrentInstance,
    ref
  } from "vue";
  const dataList = ref([])
  const dataIndex = ref(null)
  const swiperIndex = ref(0)
  const swiperList = ref([])
  const winWidth = ref('')
  const winHeight = ref('')
  const videoH = ref('')
  const showBarrage = ref(true)
  const iconColor = ref('#fff')
  const start = ref(0)
  const end = ref(null)
  const popHeight = ref(0)
  const setSwiperWH = () => {
    const {
      windowHeight,
      windowWidth
    } = uni.getSystemInfoSync()
    winHeight.value = windowHeight
    winWidth.value = windowWidth
    videoH.value = windowHeight 
    popHeight.value = windowHeight - winWidth.value / 16 * 9
  }
  const popClose = (e) => {
    if (e.show) {
      // 以默认16/9设置宽高
      videoH.value = winWidth.value / 16 * 9 *1.4
    } else {
      videoH.value = winHeight.value
    }
  }
  setSwiperWH()
  onLoad(async (option) => {
    console.log(option);
    dataList.value = JSON.parse(decodeURIComponent(option.list))
    dataIndex.value = Number(option.index)
    getSwiperList()
  })

  const getSwiperList = () => {
    const first = dataList.value[dataIndex.value]
    const after = dataList.value[calcIndex(dataIndex.value + 1)]
    const before = dataList.value[calcIndex(dataIndex.value - 1)]
    swiperList.value[swiperIndex.value] = first
    swiperList.value[calcSwiperIndex(swiperIndex.value + 1)] = after
    swiperList.value[calcSwiperIndex(swiperIndex.value - 1)] = before
    calcAspectRatio()
  }
  const calcSwiperIndex = (index) => {
    if (index < 0) {
      return 2
    } else if (index >= 3) {
      return 0
    } else {
      return index
    }
  }
  const calcIndex = (index) => {
    if (index < 0) {
      return dataList.value.length - 1
    } else if (index >= dataList.value.length) {
      return 0
    } else {
      return index
    }
  }
  // 开关弹幕
  const changeHandler = () => {
    showBarrage.value = !showBarrage.value
  }
  // 交互
  const pop = ref(null)
  const interactive = async (flag, item) => {
    if (flag === 1) {
      // 点赞
      const t = iconColor.value === '#fff' ? 1 : 2
      try {
        const res = await sourceLikes({
          type: 5,
          id: item.vid
        }, t)
        iconColor.value = iconColor.value === '#fff' ? 'red' : '#fff'
      } catch (e) {
        //TODO handle the exception
      }
    } else if (flag === 2) {
      pop.value.open(item.vid)
    }
  }


  //   轮播   触发
  const updateSwiperList = (e) => {
    let video = getVideoCtx()
    if (video) {
      video.pause()
      video.seek(0)
    }
    // 判定滑动方向，默认上滑下一个 
    let flag = e.detail.current - swiperIndex.value === 1 || e.detail.current - swiperIndex.value === -2 ? 1 : -1
    swiperIndex.value = Number(e.detail.current)
    dataIndex.value = calcIndex(dataIndex.value + flag)
    getSwiperList()
    video = getVideoCtx()
    // console.log(dataList.value[dataIndex.value]); 显示视频数据信息
    if (video) {
      video.play()
    }
  }
  const gotoNext = () => {
    // swiperIndex.value = swiperIndex.value + 1
  }
  // 进度条
  const updateSlider = (e) => {
    const {
      currentTime,
      duration
    } = e.detail
    start.value = parseInt(currentTime)
    end.value = parseInt(duration)
  }
  const _this = getCurrentInstance()
  const getVideoCtx = () => {
    return uni.createVideoContext('video' + swiperIndex.value, _this)
  }
  // 拖动进度
  const step = (e) => {
    let video = getVideoCtx()
    video.seek(e.detail.value)
  }
  // 是否支持全屏
  const isFullScreen = ref(false)
  const showInfo = ref(true)
  const calcAspectRatio = () => {
    const {
      width,
      height
    } = dataList.value[dataIndex.value]
    if (width / height >= 16 / 9) {
      isFullScreen.value = true
    } else {
      isFullScreen.value = false
      showInfo.value = true
    }
  }
  const fullScreen = () => {
    let video = getVideoCtx()
    // 2.0无效，1.0正常
    video.requestFullScreen({
      direction: 0
    })
  }
  const fullchange = () => {
    console.log('触发全屏');
  }
</script>

<style lang="less">
  .swiper-content {
    .swiper-item {
      background-color: #000;
      position: relative;
      height: 100%;

      .video-item {
        // transition: height 0.4s;
        transform: translateY(-15%);
      }

      .mutual {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

        .top {
          padding: 0 20rpx;
          display: flex;
          justify-content: space-between;
          color: #fff;

          .left {

            .info {
              margin-top: 220rpx;

              .user {
                display: flex;
                align-items: center;

                .avatar {
                  background-color: #fff;
                  width: 60rpx;
                  height: 60rpx;
                  border-radius: 50%;
                  margin-right: 10rpx;
                }

                .user-name {
                  font-size: 32rpx;
                  margin-right: 10rpx;
                }

                .follow {
                  display: inline-block;
                  background-color: red;

                  padding: 0 10rpx;
                  height: 36rpx;
                  line-height: 36rpx;
                  border-radius: 18rpx;
                }
              }

              .desc {
                font-size: 32rpx;
                margin: 15rpx 0;
              }

              .pubdate {
                font-size: 26rpx;
                color: #9c9c9c;
              }
            }
          }

          .right {
            .r-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-bottom: 30rpx;
            }
          }

        }

        .footer {
          .slider-item {
            margin: 0;
          }

          .content {
            display: flex;
            align-items: center;
            padding: 10rpx 30rpx 40rpx 30rpx;
            justify-content: space-between;

            .ipt-wrap {
              flex: 1;
              background-color: #262626;
              margin-right: 30rpx;
              height: 60rpx;
              padding: 0 30rpx;
              border-radius: 30rpx;
              position: relative;

              .ipt {
                // background-color: pink;
                height: 100%;
              }

              .isShowBarrage {
                z-index: 20;
                position: absolute;
                top: 0;
                right: 10rpx;
              }
            }
          }

        }
      }
    }
  }
</style>
